<!--写作-->
<template>
    <div style="background-color: aliceblue;width: 100%;height: 1000px">
        <div style="width: 1200px;border: 1px solid black;margin: auto;background-color: white;height: 60px">
            <div style="text-align: left">
<!--                获取其书名-->
                <el-button class="el-icon-reading" style="font-size: 20px;margin-top: 10px;margin-left: 10px" v-text="this.$route.params.title" @click="getworks">书名</el-button>
                <span> / </span>
<!--                跳转-->
                <el-button href="#" style="text-decoration: none;margin-left: 10px;font-size: 20px" class="" @click="writing">创建章节</el-button>
                <el-button style="margin-left: 700px;font-size: 20px" slot="reference" @click="getworks">作品库</el-button>
            </div>


        </div>
        <div class="divv">
            <el-tag type="danger" style="width: 100%;font-size: 15px" class="el-icon-warning-outline">
                请注意：严禁上传任何情色、低俗、涉政等违法违规内容。一旦查实，视情节严重程度全书屏蔽整改起步并取消福利，直至报警处理。
            </el-tag>
            <!--作品正文验证表单-->
            <div style="margin-top: 20px;">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <!--章节输入-->
                    <el-form-item prop="name">
                        <el-input style="width: 880px;margin-left: 10px;"
                                  placeholder="请输入章节号与章节名。示例：“第七章 天降奇缘”"
                                  v-model="ruleForm.name" clearable>
                        </el-input>
                    </el-form-item>
                    <hr size=2 redwidth=300 style="width: 900px">
                    <!--                        正文输入-->
                    <el-form-item prop="textarea">
                        <el-input style="width: 850px;margin-left: 25px" v-show="isShow"
                                  v-model="ruleForm.textarea" type="textarea"
                                  :autosize="{ minRows: 27, maxRows: 27}" placeholder="在此输入正文">
                        </el-input>
                    </el-form-item>
                    <!--                        文件上传-->
                    <div style="width: 900px;">
                        <el-upload v-show="uploading"
                                   :action="tUrl"
                                   ref="upload"
                                   class="upload-demo" drag
                                   accept=".txt"
                                   :before-upload="beforeUpload">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传txt文件</div>
                        </el-upload>
                    </div>
                    <!--                        作者的话抽屉-->
                    <div style="margin-top: -10px;margin-left: -300px">
                        <el-button class="el-icon-circle-plus-outline" @click="drawer = true" type="text" style="">
                            作家的话
                        </el-button>
<!--                        <el-drawer title="作家的话" :visible.sync="drawer" :direction="direction"-->
<!--                                   :before-close="handleClose">-->
<!--                            <hr>-->
<!--                            <el-input type="textarea" :autosize="{ minRows: 31, maxRows: 31}"-->
<!--                                      placeholder="请输入" v-model="textarea2" maxlength="500" show-word-limit>-->
<!--                            </el-input>-->
<!--                        </el-drawer>-->
                    </div>
                    <div>
                        <el-form-item>
                            <el-button   style="width: 100px;margin-left: 415px;float: bottom"
                                       type="primary" @click="submitForm('ruleForm')">发布
                            </el-button>
                        </el-form-item>
                    </div>
                </el-form>
<!--                切换上传和输入-->
                <div id="example" style="margin-left: 730px;margin-bottom: 100px;margin-top: -65px">
                    <el-button v-text="btnText" @click="showToggle"></el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Writing",
        data() {
            return {
                drawer: false,
                direction: 'rtl', //作家的话
                textarea2: '', //作家的话输入框
                //文件上传
                load:1,
                btnText: "切换上传",
                isShow: true,
                uploading: false,
                //输入框验证
                ruleForm: {
                    name: '',
                    textarea: '',
                },
                rules: {
                    name: [
                        {
                            required: true,
                            message: '请输入章节名',
                            trigger: 'blur'
                        },
                    ],
                },
                tUrl:''
            }
        },
        //上传文件
        beforeCreate() {
            // 读取文件
            FileReader.prototype.reading = function ({encode} = pms) {
                let bytes = new Uint8Array(this.result);    //无符号整型数组
                let text = new TextDecoder(encode || 'UTF-8').decode(bytes);
                return text;
            };
            /* 重写readAsBinaryString函数 */
            FileReader.prototype.readAsBinaryString = function (f) {
                if (!this.onload)       //如果this未重写onload函数，则创建一个公共处理方式
                    this.onload = e => {  //在this.onload函数中，完成公共处理
                        let rs = this.reading();
                        console.log(rs);
                    };
                this.readAsArrayBuffer(f);  //内部会回调this.onload方法
            };
        },
        methods: {
            writing(){
                this.$router.replace({name:'writing',params:{title:this.$route.params.title}})
            },
            // 返回作品库
            getworks() {
               this.$router.replace("/myWorks")
            },
            // 抽屉
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post("chapter/save",{title:this.ruleForm.name,chapter:this.ruleForm.textarea,novel_id:this.$route.params.id}).then(response=>{
                            if(response.data===1){
                                this.$message({
                                    type:'success',
                                    message:"章节已存在,小主不能上传重复章节哦~"
                                })
                                this.$router.replace("/myWorks")
                            }else if(response.data===2){

                                this.$message({
                                    type:'success',
                                    message:"小主：上传成功,正在刷新当前界面~"
                                })
                                this.$router.replace("/myWorks")
                            }else{
                                this.$message({
                                    type:'warning',
                                    message:"小主：上传失败,请检查网络~"
                                })
                                this.$router.replace("/myWorks")
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 点击切换
            showToggle: function () {
                // 点击隐藏
                this.isShow = !this.isShow
                this.uploading = !this.uploading
                if (this.isShow) {
                    this.ruleForm.textarea="1"
                    this.btnText = "切换上传"
                } else if (this.uploading) {
                    this.btnText = "切换输入"
                    this.ruleForm.textarea=""
                } else {
                    this.btnText = "切换输入"
                    this.ruleForm.textarea=""
                }
            },
            //上传文件
            beforeUpload(file) {
                console.log('选择了文件txt')
                // 读取数据，上传成功后提示成功
               this.$message({
                   type:'success',
                   message:"文件已上传请点击发布按钮"
               })
                this.read(file);
                return false
            },
            read(f) {
                let rd = new FileReader();
                rd.onload = e => {
                    //this.readAsArrayBuffer函数内，会回调this.onload函数。在这里处理结果
                    // let cont = rd.reading({encode: 'GBK'});
                    let cont = rd.reading({encode: 'UTF-8'});
                    console.log(cont)
                    this.ruleForm.textarea=cont;
                };
                rd.readAsBinaryString(f);
            },
        }
    }
</script>

<style scoped>
    .divv {
        background-color: white;
        margin: auto;
        margin-top: 20px;
        width: 900px;
        height: 850px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
</style>
